<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  ElMessage,
  ElDialog,
  ElForm,
  ElFormItem,
  ElSelect,
  ElButton,
  ElProgress,
} from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { scanSubdomain, getBeianList } from "../servers";

const props = defineProps<{
  task: string;
}>();

const beianOptions = ref<any[]>([]);
const scanDialogVisible = ref(false);
const scanForm = reactive({
  beianId: null,
});
const scanning = ref(false);
const scanProgress = ref(0);
const scanResult = ref<any>(null);

const fetchBeianOptions = async () => {
  try {
    const { data } = await getBeianList({ size: 1000 });
    beianOptions.value =
      (data.list || []).map((item: any) => ({
        label: item.domain,
        value: item.id,
      })) || [];
  } catch (error) {
    console.error("获取备案域名选项失败", error);
  }
};

const handleOpenScanDialog = () => {
  scanForm.beianId = null;
  scanDialogVisible.value = true;
};

const handleScanSubdomain = async () => {
  if (!scanForm.beianId) {
    ElMessage.warning("请选择备案域名");
    return;
  }
  scanning.value = true;
  scanProgress.value = 0;
  scanDialogVisible.value = false;
  try {
    const { data } = await scanSubdomain({
      beian_id: scanForm.beianId,
      auto_save: true,
    });
    scanResult.value = data;
    ElMessage.success("子域名扫描完成");

    // 模拟进度更新
    const timer = setInterval(() => {
      scanProgress.value += 10;
      if (scanProgress.value >= 100) {
        clearInterval(timer);
        scanning.value = false;
        scanProgress.value = 0;
      }
    }, 300);
  } catch (error) {
    ElMessage.error("创建扫描任务失败");
    scanning.value = false;
  }
};

onMounted(() => {
  fetchBeianOptions();
});
</script>

<template>
  <div>
    <el-card>
      <div style="padding: 40px; text-align: center">
        <h2 style="margin-bottom: 20px; color: #409eff">子域名扫描</h2>
        <p style="color: #909399; margin-bottom: 30px">
          选择备案域名，系统将自动扫描该域名的所有子域名
        </p>
        <el-button
          type="primary"
          size="large"
          @click="handleOpenScanDialog"
          :icon="Search"
        >
          开始扫描
        </el-button>
      </div>
    </el-card>

    <!-- FOFA扫描对话框 -->
    <el-dialog v-model="scanDialogVisible" title="子域名扫描" width="500px">
      <el-form :model="scanForm" label-width="100px">
        <el-form-item label="备案域名" required>
          <el-select
            v-model="scanForm.beianId"
            placeholder="选择备案域名"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="option in beianOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="scanDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleScanSubdomain"
          >开始扫描</el-button
        >
      </template>
    </el-dialog>

    <!-- 扫描进度对话框 -->
    <el-dialog
      v-model="scanning"
      title="扫描中..."
      :close-on-click-modal="false"
      width="500px"
      :show-close="false"
    >
      <div class="scan-progress">
        <p><strong>状态:</strong> 正在扫描中...</p>
        <el-progress :percentage="scanProgress" />
        <p style="margin-top: 10px; color: #909399">正在从FOFA获取子域名数据</p>
        <div
          v-if="scanResult"
          style="
            margin-top: 20px;
            padding: 16px;
            background: #f5f7fa;
            border-radius: 4px;
          "
        >
          <p><strong>扫描完成！</strong></p>
          <p>
            FOFA返回总数: <strong>{{ scanResult.total }}</strong>
          </p>
          <p>
            验证通过数量: <strong>{{ scanResult.valid }}</strong>
          </p>
          <p>
            成功保存数量: <strong>{{ scanResult.saved }}</strong>
          </p>
        </div>
      </div>
      <template #footer v-if="!scanning">
        <el-button type="primary" @click="scanning = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.scan-progress {
  p {
    margin: 10px 0;
  }
}
</style>
